<template>
  <div>
    <el-button type="primary" @click="addShop()">新增</el-button>
    <el-input style="width:300px;margin-left: 100px;" v-model="state.searchData.name" 
    @input="changeSearch" clearable
      :prefix-icon="LocationFilled" placeholder="请输入蛋糕名称" />
    <el-table :data="state.tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column fixed prop="id" label="ID" width="55" />
      <el-table-column prop="name" label="名称" width="200" />
      <el-table-column prop="img" label="图片" width="200">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="fit" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="200" />
      <el-table-column prop="store" label="库存" width="200" />
      <el-table-column prop="size" label="尺寸" width="200" />

      <el-table-column prop="classifyName" label="分类名称" width="200" />
      <el-table-column prop="flavorName" label="口味分类" width="200" />

      <el-table-column prop="crowdName" label="适合人群" width="200" />


      <el-table-column prop="updateTime" label="更新时间" width="200" />
      <el-table-column prop="createTime" label="创建时间" width="200" />

      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button link type="danger" @click="showDeletePopover(scope.row.id, scope.row.name)">删除</el-button>
          <el-button v-if="!scope.row.isKefu" link type="primary" @click="updateShopPlace(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
  <div class="demo-pagination-block" style="margin-top: 30px">
    <el-pagination v-model:current-page="state.searchData.page" v-model:page-size="state.searchData.limit" :page-sizes="
  state.searchData.total <= 40
    ? [5, 10, 15, 20]
    : [5, 10, 15, 20, state.searchData.total]
" :disabled="false" :background="true" layout="->,total, sizes, prev, pager, next, jumper"
      :total="state.searchData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <el-dialog v-model="importDataDialogVisible" title="提示：请先下载导入模板，然后在导入模板填写，最后再上传填写好的导入模板">
      <el-button type="success" @click="downImportDemo" class="mb-3">下载导入模板</el-button>
      <!--    action="http://127.0.0.1:9090/customer/newImportAllInfo -->
      <el-upload name="multipartFile" class="upload-demo" drag :action="UploadFileUrl()" :auto-upload="false"
        accept=".xlsx" :on-change="fileChange" :limit="1" :on-exceed="handleExceed" :file-list="fileList">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          你可以将文件拖拽到特定区域以进行上传 <em>或者点击这里</em>
        </div>
        <template #tip>
          <div class="el-upload__tip text-end">
            <el-button class="mt-3" type="primary" @click="uploadFileBtn">立即上传</el-button>
          </div>
        </template>

      </el-upload>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, markRaw, onBeforeMount } from "vue";
import { Edit, User, LocationFilled, Location, UploadFilled } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
import request from "../../api/request";
import router from "../../router";

const importDataDialogVisible = ref(false)

const state = reactive({
  tableData: [],
  searchData: {
    page: 1,
    limit: 5,
    name: ""
  },
});
const initData = () => {
  let authentication = localStorage.getItem("adminInfo");
  if (!(authentication == 2)) {
    router.push("/admin/login");
    return;
  }
  request.post("/cake/list", state.searchData).then((res) => {
    if (res.code == 200) {
      state.tableData = res.data.records;
      state.searchData.total = res.data.total;
    }
  });
};
initData();

const showDeletePopover = (id, name) => {
  ElMessageBox.confirm(`您确定删除   ${name}   吗`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(() => {
      request.post("/cake/remove", id).then((res) => {
        ElMessage({
          type: "success",
          message: res.msg,
        });
        if (res.code == 200) {
          initData();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
const handleCurrentChange = (page) => {
  state.searchData.page = page;
  initData();
};

const handleSizeChange = (limit) => {
  state.searchData.limit = limit;
  initData();
};

const changeSearch = () => {
  initData();
}
const updateShopPlace = (id) => {
  router.push("/admin/addCakeManage?params=" + id);
};
const addShop = () => {
  router.push("/admin/addCakeManage");
};

</script>
<style lang="scss" >

</style>

